<template>
  <div class="did-h">
    <div class="black black-h">
      <div>注册DID，包括直接自动注册、本地生成公私钥注册两种方式。</div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="自动注册" name="first">
          <div class="did-content">
            <h1>点击下方创建DID按钮，自动生成DID</h1>
            <div class="did-button">
              <el-button size="medium" type="primary" @click="registrationDid">创建DID</el-button>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="公私钥" name="second">
          <el-row :gutter="20" class="mt3">
            <el-col :span="10" :offset="6">
              <el-form label-position="right" label-width="80px" :model="form">
                <el-form-item label="公钥">
                  <el-input v-model="form.publicKey" placeholder="请输入公钥"></el-input>
                </el-form-item>
                <el-form-item label="私钥">
                  <el-input v-model="form.privateKey" placeholder="请输入私钥"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="10" :offset="13">没有公私钥?点击 <el-button type="text" @click="genKeys">此处</el-button></el-col>
          </el-row>
          <div class="did-button">
            <el-button size="medium" type="primary" @click="registrationDidByKeys">创建DID</el-button>
          </div>
        </el-tab-pane>
        <!-- <el-tab-pane label="代理" name="third">
          <el-row :gutter="20" class="mt3">
            <el-col :span="10" :offset="6">
              <el-form label-position="right" label-width="130px" :model="form">
                <el-form-item label="公钥">
                  <el-input v-model="form.publicKey" placeholder="请输入公钥"></el-input>
                </el-form-item>
                <el-form-item label="代理DID">
                  <el-input v-model="formDID.did" placeholder="请输入代理DID"></el-input>
                </el-form-item>
                <el-form-item label="代理公钥ID">
                  <el-input v-model="form.region" placeholder="请输入代理公钥ID"></el-input>
                </el-form-item>
                <el-form-item label="代理私钥">
                  <el-input v-model="form.region" placeholder="请输入代理私钥"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="10" :offset="13">没有公私钥？点击此处 <el-button type="text" @click="genKeys">自动生成</el-button></el-col>
          </el-row>
          <div class="did-button">
            <el-button size="medium" type="primary" @click="registrationDIdByDelegate">创建DID</el-button>
          </div>
        </el-tab-pane> -->
      </el-tabs>
    </div>
    <div class="black mt1 black-height">
      <el-row :gutter="20" class="mt3">
        <el-col :span="10" :offset="6">
          <ul>
            <li class="publicKey">
              <span class="span">DID：</span>
              <span class="span-key">{{ data.weId }}</span>
            </li>
            <li class="publicKey">
              <span class="span">公钥：</span>
              <span class="span-key">{{ data.userWeIdPublicKey.publicKey }}</span>
            </li>
            <li class="publicKey">
              <span class="span">私钥：</span>
              <span class="span-key">{{ data.userWeIdPrivateKey?data.userWeIdPrivateKey.privateKey:'' }}</span>
            </li>
          </ul>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import NoData from '../../../components/noData.vue';
export default {
  components: {
    NoData,
  },
  data() {
    return {
      activeName: 'first',
      form: {
        publicKey: '',
        privateKey: '',
        // type: '',
      },
      formDID:{

      },
      data: {
        userWeIdPublicKey: {
          publicKey: '',
        },
        userWeIdPrivateKey:{
          privateKey:''
        },
        weId: '',
      },
    };
  },
  mounted() {},
  methods: {
    handleClick(tab, event) {
      this.data = {
        userWeIdPublicKey: {
          publicKey: '',
        },
        userWeIdPrivateKey:{
          privateKey:''
        },
        weId: '',
      }
      console.log(tab, event);
    },
    async registrationDid() {
      let res = await this.$http.get(this.$api.did.registrationDid);
      if (res.code == 200) {
        this.data = res.data;
      }
    },
    async registrationDidByKeys() {
      let params = this.form;
      let res = await this.$http.post(this.$api.did.registrationDidByKeys, params);
      if (res.code == 200) {
        this.data = res.data;
      }
    },
    async genKeys() {
      let params = {
        isGM:true
      }
      let res = await this.$http.post(this.$api.did.genKeys,params);
      if (res.code == 200) {
        // this.data = res.data;
        this.form.publicKey = res.data.publicKey;
        this.form.privateKey = res.data.privateKey;

      }
    },
    async registrationDIdByDelegate() {
      let params = {
        isGM:true
      }
      let res = await this.$http.post(this.$api.did.registrationDIdByDelegate,params);
      if (res.code == 200) {
        // this.data = res.data;
        this.form.publicKey = res.data.publicKey;
        this.form.privateKey = res.data.privateKey;

      }
    },
    
  },
};
</script>
<style lang="less" scoped>
.did-content {
  margin-top: 10%;
  h1 {
    color: #666666;
    width: 320px;
    margin: 0 auto;
  }
}
.did-button {
  width: 100px;
  margin: 0 auto;
  margin-top: 20px;
}
.m-a0 {
  margin: 0 auto;
}
.black-h {
  height: 50%;
}
.black-height {
  height: calc(50% - 90px);
}
.nodata {
  margin-top: 10%;
}
.did-width {
  width: 500px;
  margin: 0 auto;
}
.publicKey {
  display: flex;
  line-height: 30px;
  .span {
    width: 50px;
    text-align: right;
  }
  .span-key {
    width: calc(100% - 50px);
    word-break: break-word;
    white-space: pre-line;
  }
}
</style>
